import { defineComponent, reactive } from "vue";

const state = reactive({ name: "张三" });
const list = reactive([1, 2, 3]);

export const tsxDom = (props: any, ctx: any) => (
  <>
    {/* 默认插槽 */}
    <div>{ctx.slots.default ? ctx.slots.default() : "默认"}</div>
    {/* 声明名称为state的插槽 并传值，不传值为ctx.slots.state() */}
    <div>{ctx.slots.state && ctx.slots.state(state)}</div>
    {/* 声明名称为list的插槽 并传值，不传值为slots.list() */}
    <div>{ctx.slots.list && ctx.slots.list(list)}</div>
  </>
);

export default defineComponent({
  setup() {
    type State = {
      name: string;
    };

    // 使用插槽
    const slots = {
      // default: () => <div>匿名插槽</div>,
      state: (state: State) => <div>{state.name}</div>,
      list: (list: number[]) => list.map((item) => <div>{item}</div>),
    };
    return () => (
      <>
        {/* 引用组件，使用插槽：v-slots={slots} */}
        <tsxDom v-slots={slots} />
      </>
    );
  },
});
